/* 
  style.css contains a reset, font normalization and some base styles.
  
  credit is left where credit is due.
  additionally, much inspiration was taken from these projects:
    yui.yahooapis.com/2.8.1/build/base/base.css
    camendesign.com/design/
    praegnanz.de/weblog/htmlcssjs-kickstart
*/

/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  

article, aside, figure, footer, header, 
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */


/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
          Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages

There are three custom edits:
 * remove arial, helvetica from explicit font stack
 * make the line-height relative and unit-less
 * remove the pre, code styles
*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }

table { font-size:inherit; font:100%; }

select, input, textarea { font:99% sans-serif; }


/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { font-family: monospace, sans-serif; }
 


/* 
 * minimal base styles 
 */


/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 
body, select, input, textarea { color:#444; }

/* Headers (h1,h2,etc) have no default font-size or margin,
   you'll want to define those yourself. */ 
 
/* www.aestheticallyloyal.com/public/optimize-legibility/ */ 
h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; }

/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }

 
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

a, a:active, a:visited { color: #ff3b3b;text-decoration: none;}
a:hover { color:#fff; }


ul { margin-left:30px; }
ol { margin-left:16px; list-style-type: decimal; }

small { font-size:85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align:top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }


/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301 
   Also: hot pink. */
::-moz-selection{ background: #ff3c00; color:#fff; text-shadow: none; }
::selection { background:#ff3c00; color:#fff; text-shadow: none; }

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #ff3c00; }


/* always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }
 
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }



/* 
 * Non-semantic helper classes 
 */

/* for image replacement */
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; }

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display:none; visibility:hidden; } 

/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/ 
   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
.visuallyhidden { position:absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* >> The Magnificent CLEARFIX << */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }





 /* Primary Styles
    Author: 
 */

 body {height:100%!important;font-family:Arial;width:100%!important;}

 h1, h2 {font-size:1.4em;}
 h1, h2, p {margin-bottom:1em;}


 h1, h2, .zoom-value, #ui-preview .prev-header span, .button, #copyOutput, #makeOutput, #donate, .qq-upload-button {font-family: Georgia, Time New Roman, serif;font-style:italic;}

.val span, input, textarea, #ui-header .btn-func {font-family:Georgia, Times New Roman, serif;}

 .box {cursor:move;background-color:#000;}
#main {
 -moz-user-select: -moz-none;
 -webkit-user-select: none;width:100%;height:100%;top:0px;left:0px;position:absolute;}
#graph {
 -moz-user-select: -moz-none;
 -webkit-user-select: none;
 cursor:crosshair;
 background-image:url('img/graph.png');
 width:100%!important;
 height:800px;
 top:0px;left:0px;position:absolute;}
#zoom {cursor: none;opacity:0;z-index:103;
 -moz-user-select: -moz-none;
 -webkit-user-select: none;
       -webkit-background-size:2;
       -moz-background-size:2;
       -o-background-size:2;
       width:100px;height:100px;position:absolute;display:none;border-radius:50px;-moz-border-radius:50px;
		margin:0px 0px 0px 0px;text-align:center;
                -webkit-transition:opacity 0.6s ease-out;
}

.zoom-value {display:none;font-size:1.4em;font-weight:bold;position:relative;top:35px;left:45px;}

.selected {opacity:0.7!important;background-color:#ff0000!important;}
.zoomOn #zoom, .crossOn .crosshair {cursor: none;display:block!important;opacity:1!important;}
.zoomOn #graph, .crossOn #graph {cursor:none;}
#zoom span {display:block;;position:relative;}
#zoom span.horz {border-bottom:1px solid #aaaaaa;top:50px;left:25px;width:50px;}
#zoom span.vert {border-left:1px solid #aaaaaa;top:25px;left:50px;height:50px;}
#zoom:active span {border-color:#ff3c00;}

.crosshair {display:none;background-color:#68aac8;opacity:0;position:absolute;z-index:1;
 -moz-user-select: -moz-none;
 -webkit-user-select: none;font-size:0.8em;}
#cross-vert {height:100%;width:1px;}
#cross-horz {height:1px;width:100%;}

.no-select {
 -moz-user-select: -moz-none;
 -webkit-user-select: none;}

.close {display:block;width:36px;height:38px;background-image:url('img/close.png');position:absolute;top:-8px;float:right;right:-22px;}

.thekey {font-weight:bold!important;font-size:0.9em;font-style:italic;float:left;}
.thekey img {margin:2px 0px;}

#ui-info ol li {margin-bottom:14px;}

#ui-info  {
 -moz-user-select: -moz-none;
 -webkit-user-select: none;color:#fff;opacity:0.8;background:#000;padding:1px 1px 0px 1px;
 -webkit-box-shadow: 0px 0px 40px #070707;
 -moz-box-shadow: 0px 0px 40px #070707;
 box-shadow: 0px 0px 40px #070707;
 width:370px;border:2px solid #f3f3f3;color:#f3f3f3;font-size:1em-moz-border-radius:6px;border-radius:6px;position:absolute;top:40px;right:640px;z-index:105;}

#preview {margin:auto;}

#ui-preview  {
 -moz-user-select: -moz-none;
 -webkit-user-select: none;color:#fff;opacity:0.8;background:#000;padding:1px 1px 0px 1px;
 -webkit-box-shadow: 0px 0px 40px #070707;
 -moz-box-shadow: 0px 0px 40px #070707;
 box-shadow: 0px 0px 40px #070707;
 width:200px;height:200px;border:2px solid #f3f3f3;color:#f3f3f3;font-size:1em;-moz-border-radius:6px;border-radius:6px;position:absolute;top:40px;right:390px;z-index:105;}

#ui-prev-wrap {overflow:hidden!important;}

.ui-tabs-nav, #ui-header, h1 {cursor:move;}
.ui-tabs-panel {font-size:0.9em;line-height:1.4em;}

#ui-preview .prev-header {cursor:move;
border: 1px solid white;
color: white;
font-weight: bold;
zoom: 1;border-radius:4px;-moz-border-radius:4px;padding:12px 10px;color:#000;
background: -webkit-gradient(linear, 0% 100%, 0% 20%, from(#B1B1B1), to(#F3F3F3));
background: -moz-linear-gradient(center bottom , #B1B1B1 0%, #F3F3F3 60%) repeat scroll 0 0 transparent;background-color:#f3f3f3;}

#ui-preview .prev-header span {color: #ce1f12;}

#ui-info a {font-weight:bold;}
#ui-info img {vertical-align: middle;}
#ui-panel-container {
 -moz-user-select: -moz-none;
 -webkit-user-select: none;padding-top:1px!important;-moz-border-radius:6px;opacity:0.86;border-radius:6px;background:url('img/bg-diag.png') #040404;color:#fff;padding:0px 0px;}
#ui-panel{
 -moz-user-select: -moz-none;
 -webkit-user-select: none;
 -webkit-box-shadow: 0px 0px 40px #070707;
 -moz-box-shadow: 0px 0px 40px #070707;
 box-shadow: 0px 0px 40px #070707;
 width:300px;border:2px solid #fff;font-size:1.1em;border-radius:6px;-moz-border-radius:6px;position:absolute;top:40px;right:40px;z-index:105;}
#ui-header .btn-func {background-color:#fff!important;border:2px solid #f3f3f3!important;margin:9px 6px 0px 0px;}




#ui-header, #tool-header {border:1px solid #fff!important;border-radius:6px 6px 4px 4px;-moz-border-radius:6px 6px 4px 4px;color:#fff;font-weight:normal;line-height:16px;
            background-color:#f6f6f6;
            -o-background-size: 100% 100%;
            background:-webkit-gradient(linear, 0% 100%, 0% 20%, from(#b1b1b1), to(#f3f3f3));
            background: -moz-linear-gradient(center bottom,#b1b1b1 0%,#f3f3f3 60%);      
            filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#b1b1b1,endColorstr=#f3f3f3,GradientType=0); zoom: 1;
            border:1px solid #434343;width:288px;height:40px;margin:0px 1px;padding-left:8px;}
#ui-header #info {
    background: #3f90ff!important;
    background:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#9fdcf6), to(#3f90ff));
        background: -moz-linear-gradient(center bottom,#9fdcf6 0%,#3f90ff 60%);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#9fdcf6,endColorstr=#3f90ff,GradientType=0); zoom: 1;
}
#ui-header #move {
              background-image:none!important;background-color:#757575!important;cursor:move!important;width:18px;height:18px;border-radius:22px;-moz-border-radius:22px;}
#ui-header #prev-btn {
    background-color: #08b000!important;
              background-image:none;}
#ui-header #mini {background-image:
        -webkit-gradient(linear, 0% 100%, 0% 0%, from(#00eb85), to(#ce3e12));
              background: -moz-linear-gradient(
    center bottom,
    #3f90ff 0%,
    #49b8ff 60%
);}
#ui-header #mini span {border-color:#ce3e12!important;font-weight:bold;font-size:1.4em;line-height:13px;}
#ui-header #move span  {margin:1px;cursor:move!important;border-color:#757575!important;background:url('img/ico-move.png') 1px 1px no-repeat;background-color:#8c8c8c!important;}
#ui-header #info span {border-color:#597cab;font-weight:bold;}
#ui-panel h1 {z-index:200;left:10px;top:2px;margin:0px;background-position: 0px 6px;
background-repeat: no-repeat;opacity:1;
text-indent:-999px;overflow:hidden;height:40px;
width:200px;display:block;background-image:url('img/logo.png');
position:absolute;}
#ui-panel h2 {line-height:2em;font-size:0.8em;font-weight:normal;background-color:#1e1e1e;background-image:
        -webkit-gradient(linear, 0% 100%, 0% 0%, from(#000), to(#1c1c1c));
              background: -moz-linear-gradient(
    center bottom,
    #1c1c1c 6%,
    #434343 53%
);
            width:268px;margin:0px 6px;padding:0px 10px;margin-top:6px;border-radius:4px 4px 0px 0px;-moz-border-radius:4px 4px 0px 0px;}
.top-property {font-size:0.9em!important;width:280px;padding:10px;line-height:14px;margin-bottom:16px;color:#e4e4e4;font-family:Georgia;font-weight:bold;}
.top-property input {width:260px;font-size:0.9em!important;}
.options {padding-top:14px!important;position:relative;z-index:-10;border:1px solid #1e1e1e ;background:url('img/bg-grad.png') top center no-repeat #000;clear:both;-moz-border-radius:2px;border-radius:2px;margin:0px 6px;padding:10px;}
.options, #ui-panel input {color:#fff;}
.output {border:1px solid #1e1e1e ;background:url('img/bg-diag.png') #b1b1b1;-moz-border-radius:4px 4px 6px 6px;border-radius:4px 4px 6px 6px;margin:12px 0px 0px 0px;border-top:1px solid #fff;padding:0px;}
.half {width:131px;float:left;clear:none;padding:0px 0px;}

.options.disable {opacity:0.2;}
.options.disable #options-disable {display:block!important;}
#options-disable {display:none;width:266px;height:300px;position:absolute;}

.options div, .options strong {line-height:32px;}
.size .val {display:block;float:right;width:132px;margin:6px 18px 4px 0px;color:#FF3C00 !important;}
.size .val span {font-size:1.4em;float:right;margin-right:18px;}

#update {border:1px dashed #FF3B3B; padding:0px 10px;margin-top:20px;font-size:0.9em;}
#update .up-header {color:#FF3B3B;float:left;font-style:normal;font-weight:bold;padding-right:6px;background-color:#000;position:relative;top:-10px;}

input[type=text] {padding:4px!important;width: 175px;}
.button, .button span {cursor:pointer;}
.button:active {opacity:0.6;}

#ui-panel .options input, #ui-panel .top-property input {padding:0px 10px;
       
       background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#000), to(#0d0d0d));
       background: -moz-linear-gradient(
    center bottom,
    #000 6%,
    #0d0d0d 53%
);

       border-radius:4px;-moz-border-radius:4px;border:1px solid #434343;background-color:#1c1c1c;font-style:italic;font-size:1.1em;}
#image-url {margin-bottom:4px;font-style:normal!important;background:#fff!important;opacity:0.9;color:#000!important;width:262px;padding:8px!important;}
#image-url:focus {opacity:1;}
#boxname {float:right;}

#output {opacity:0.8;resize:none; border:1px solid #b1b1b1;margin:6px;color:#000;}
.output img {margin:7px 4px;}
.button {
    background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#1c1c1c), to(#434343));
    background: -moz-linear-gradient(
    center bottom,
    #1c1c1c 6%,
    #434343 53%
);
    margin:1px 4px;display:inline-block;border:1px solid #434343;}
.button span {border-radius:8px;-moz-border-radius:8px;display:block;text-align:center;}
.opt-selected span {border-color:#191919;color:#FF3C00;background-color:#f3f3f3!important;}

#contact-corner {padding:0px 4px;border-radius:6px 0px 0px 0px;-moz-border-radius:6px 0px 0px 0px;font-style:italic;color:#fff;font-size:1.5em;font-family:Georgia;font-weight:bold;position:fixed;right:0px;bottom:0px;background-color: #000;opacity:0.4;}
#contact-corner a {color:#fff;}
#contact-corner:hover {opacity:0.8;}
.tickboxes {font-size:0.9em;line-height:1.2em!important;}

#contact input[type=text], #contact textarea {background-color:#fff;padding:8px 10px!important;-moz-border-radius:4px;border-radius:4px;border:none!important;font-size:1.4em;}
#contact input[type=text] {float:right;width:240px;margin:0px;}
#contact textarea {resize:none;width:310px;margin-top:10px;}
#contact fieldset {width:330px;}
#contact label {font-size:1.2em;font-style:italic;}

.btn-ico {border-radius:8px;-moz-border-radius:8px;}
.btn-ico span {border-radius:8px;-moz-border-radius:8px;height:24px;line-height:24px;width:24px;}
.btn-val {border-radius:12px;-moz-border-radius:12px;margin:10px 8px -5px 0px;}
.btn-val span {border-radius:8px;-moz-border-radius:8px;height:16px;width:16px;background:none;}
.btn-val.opt-selected span {width:10px;height:10px;margin:3px!important;display:block;}
.btn-opt {border-radius:8px;-moz-border-radius:8px;margin:0px 5px 0px 0px;}
.btn-opt span {border-radius:8px;-moz-border-radius:8px;height:24px;line-height:24px;padding:0px 10px;}

.output .button {margin:1px 6px;}

#copyOutput, #makeOutput, #donate, .qq-upload-button {border-radius:8px;-moz-border-radius:8px;font-size:1em;font-weight:bold;}
#copyOutput {
    background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#ff5d0e), to(#ffe371));
    background-image: -moz-linear-gradient(
    center bottom,
    #ff5d0e 6%,
    #ffe371 53%
)!important;border:1px solid #e04a00;color:#b52b09;}
#donate {
    background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#ffba00), to(#fff));
    background-image: -moz-linear-gradient(
    center bottom,
    #ffba00 0%,
    #fff 90%
)!important;border:1px solid #fff;color:#ff3c00;border-radius:4px;-moz-border-radius:4px;}
.btn-light span {border-radius:8px;-moz-border-radius:8px;border-width: 1px;border-color:#fff;height:24px;line-height:24px;padding:2px 8px;}
#makeOutput {

    font-weight:bold;background-color:#71ff85;background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#08b000), to(#71ff85));
    background-image: -moz-linear-gradient(
    center bottom,
    #08b000 6%,
    #71ff85 53%
);border:1px solid #457f42;color:#022b00;margin-bottom:10px;}
#submit {

    font-weight:normal;background-color:#ff5123;
    background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#ff5123), to(#b02500));
    background-image: -moz-linear-gradient(
    center bottom,
    #ff5123 6%,
    #b02500 53%
);border:1px solid #b02500;color:#054100;font-size:2em;margin-bottom:10px;border-radius:8px;-moz-border-radius:8px;color:#fff;padding:6px 10px;font-style:italic;}
.val {display:inline-block;width:46px!important;text-align:left;}
textarea {width:272px;padding:6px;}
.val small {font-family:Verdana;}

.break {width:100%;height:1px;background:url('img/bg-grad.png') -14px top;display:block;margin:10px 0px;}
#ui-info .break {background-position:50% 0%;background-repeat:no-repeat;}

.clear{clear:both;}
.left {float:left;}
.right {float:right;margin-left:0px;}

/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none; }

  a, a:visited { color: #444 !important; text-decoration: underline; }

  a:after { content: " (" attr(href) ")"; } 

  abbr:after { content: " (" attr(title) ")"; }
  
  .ir a:after { content: ""; }  /* Don't show links for images */
  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  
  img { page-break-inside: avoid; }

  @page { margin: 0.5cm; }

  p, h2, h3 { orphans: 3; widows: 3; }

  h2, h3{ page-break-after: avoid; }
}



/*
 * Media queries for responsive design
 */

@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  
  
  /* Prevent iOS, WinMobile from adjusting font size */
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
}
